<template>
	<view class="my-path-list">
		<!-- 自定义导航栏 -->
		<uniNavbar 
			title="地址管理" 
			:right-text='isNavBar?"保存":"编辑"'
			fixed="true"
			status-bar='true'
			@clickRight='isNavBar = !isNavBar'
		></uniNavbar>
		<view class="path-list">
			<view v-for="(item,index) in list"
					:key="index"
					@tap="gotoAddpath(index)">
				<view class="path-item" @tap="goConfirmOrder(item)">
					<view  class="item-mian">
						<view class="item-name">{{item.name}}</view>
						<view>{{item.tel}}</view>
					</view>
					<view class="item-mian">
						<view class="active" v-if='item.isDefault'>默认</view>
						<view>{{item.city}}{{item.details}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="add-path">
			<view class="add-path-btn" @tap="goAddPage">新增地址</view>
		</view>
	</view>
</template>
<script>
	import $http from '../../common/api/request.js'
	import uniNavbar from '@/components/uni/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				isNavBar:false,
				//判断是选择地址
				isSelectedPath:false
			}
		},
		components:{
			uniNavbar,
		},
		computed:{
			...mapState({
				list:state=>state.path.list
			})
		},
		onLoad(e){
			//判断是从确认订单页面过来的
			if(e.type === 'selectPath') {
				this.isSelectedPath = true;
			}
			//拿到收货地址的数据
			this.__initAddress();
		},
		methods: {
			//初始化，收货地址的接口，请求数据
			__initAddress(){
				$http.request({
					url:"/setAddress",
					method:"GET",
					// headers:{
					// 	token:true
					// }
				}).then((res)=>{
					console.log(res);
					
				}).catch(()=>{
					uni.showToast({
						title:'请求失败',
						icon:'none'
					})
				})
			},
			// 新增
			goAddPage() {
				uni.navigateTo({
					url:"../my-add-path/my-add-path"
				})
			},
			// 修改
			gotoAddpath(index) {
				let pathObj = JSON.stringify({
					index:index,
					item:this.list[index]
				})
				uni.navigateTo({
					url:"../my-add-path/my-add-path?data="+pathObj+""
				})
			},
			//返回确认订单页面
			goConfirmOrder(item){
				//从确认订单页面过来的
				if(this.isSelectedPath == true){
					uni.$emit("selectPathItem",item);
					//返回确认订单页
					uni.navigateTo({
						url:'../confirm-order/confirm-order'
					})
					
				}
			}
		}
	}
</script>

<style scoped>
.path-list {
	padding-left: 20rpx;
}
.path-item {
	padding: 10rpx;
	border-bottom: 2rpx solid #CCCCCC;
}
.item-mian {
	display: flex;
	align-items: center;
}
.item-name {
	padding-right: 10rpx;
}

.active {
	padding-right: 10rpx;
	background-color: #49BDFB;
	color: #FFFFFF;
	border-radius: 25rpx;
	font-size: 24rpx;
	text-align: center;
}

/* 新增地址样式 */
.add-path {
	padding: 20rpx 0;
	width: 100%;
	display: flex;
	justify-content: center;
}
.add-path-btn {
	border: 2rpx solid #49BDFB;
	color: #49BDFB;
	border-radius: 30rpx;
	padding: 6rpx 32rpx;
}
</style>
